<template>
	<view class="page index">
		<view class="header">
			<common-search v-model="keyWord" @input="input" :isFilter="false"></common-search>
		</view>
		<view class="main">
			<empty v-if="empty" :desc="desc"></empty>
			<scroll-view v-else class="scroll" scroll-y="true" :show-scrollbar="false" :enhanced="true" @scrolltolower="scrollLower">
				<view class="custome-list">
					<view class="custome-item" v-for="item in customerList" :key="item.id" @click="toDetails(item.id)">
						<view class="header">
							<view class="left">
								{{item.name}}
							</view>
							<view v-if="item.cooperationStatus" class="right" style="border-color: #3BBF03; color: #3BBF03;">
								正常
							</view>
							<view v-else class="right" style="border-color: #F44444; color: #F44444;">
								暂停合作
							</view>
						</view>
						<view class="details">
							<view class="det-item">
								<view class="tag">
									客户类型
								</view>
								<view class="value">
									{{item.typeText}}
								</view>
							</view>
							<view class="det-item">
								<view class="tag">
									客户等级
								</view>
								<view class="value">
									{{item.levelText}}
								</view>
							</view>
							<view class="det-item">
								<view class="tag">
									所在地区
								</view>
								<view class="value">
									{{$share.getArea(item.areaName)}}
								</view>
							</view>
							<view class="det-item">
								<view class="tag">
									当前实施项目
								</view>
								<view class="value">
									{{item.carryOutProjectNum || 0}}
								</view>
							</view>
							<view class="det-item">
								<view class="tag">
									累计成功项目
								</view>
								<view class="value">
									{{item.completedProjectNum || 0}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="create" @click="createCustomer">
				新建
			</view>
		</view>
	</view>
</template>

<script>
	import commonSearch from "@/components/commonSearch.vue";
	import {getCustomerPageApi} from "@/api/customer_api.js";
	import empty from "@/components/empty.vue";
	export default {
		components: {
			commonSearch,
			empty
		},
		data() {
			return {
				empty: false,
				desc:'',
				keyWord: '',
				customerList:[],//客户列表
				pageNum: 1,//页码
				pageSize: 10,//每页数据数
				totalPage: 1, //总页数
			}
		},
		onLoad() {
			
		},
		onShow() {
			uni.showLoading({
				title:'加载中...',
				mask:true
			})
			this.customerList = [];
			this.getCustomerList();
		},
		methods: {
			// 滚动条触底
			scrollLower(){
				if(this.pageNum >= this.totalPage){
					return;
				}
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.pageNum++;
				this.getCustomerList();
			},
			//关键字
			input(e) {
				uni.showLoading({
					title:'加载中...',
					mask:true
				})
				this.pageNum = 1;
				this.customerList = [];
				this.getCustomerList();
			},
			// 获取客户列表
			async getCustomerList(){
				this.empty = false;
				if(this.keyWord == ''){
					this.desc = '暂无客户'
				}else{
					this.desc = '未搜索到客户'
				}
				let res = await getCustomerPageApi({
					name: this.keyWord,
					pageNo: this.pageNum,
					pageSize: this.pageSize
				}).catch(() => {
					uni.hideLoading();
					this.empty = true;
					return Promise.reject();
				});
				this.totalPage = Math.ceil(res.data.total / this.pageSize);
				res.data.list = res.data.list.map((item) => {
					let typeText = '';
					let levelText = '';
					switch(item.type){
						case 1: {
							typeText = '个体';
							break;
						}
						case 2: {
							typeText = '私营';
							break;
						}
						case 3: {
							typeText = '国营';
							break;
						}
						case 4: {
							typeText = '党政军';
							break;
						}
						case 5: {
							typeText = '境外';
							break;
						}
					}
					switch(item.level){
						case 1: {
							levelText = 'A（重要）';
							break;
						}
						case 2: {
							levelText = 'B（关注）';
							break;
						}
						case 3: {
							levelText = 'C（一般）';
							break;
						}
					}
					return{
						...item,
						typeText,
						levelText
					}
				})
				this.customerList = [...this.customerList,...res.data.list];
				if(this.customerList.length == 0){
					this.empty = true;
				}
				await uni.hideLoading();
			},
			toDetails(id) {
				uni.navigateTo({
					url: `/pages/index/customer/details?id=${id}`
				})
			},
			createCustomer() {
				uni.navigateTo({
					url: '/pages/index/customer/createCustomer'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";

	.index {
		@include flex-c;

		>.header {
			padding: 24rpx 30rpx 10rpx;
			flex: 0 0 auto;
		}

		.main {
			flex: 1 0 0;
			overflow: hidden;
			.scroll{
				height: 100%;
				padding: 0 0 24rpx;
				.custome-list {
					padding: 14rpx 30rpx;
				
					.custome-item {
						@include box;
						@include list;
						margin: 0 0 18rpx;
					}
				}
			}

			.create {
				position: fixed;
				bottom: 106rpx;
				right: 30rpx;
				width: 80rpx;
				height: 80rpx;
				background-color: #4095E5;
				@include flex-r-center-center;
				font-size: 24rpx;
				color: #fff;
				border-radius: 50%;
				box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
			}

			&::-webkit-scrollbar {
				display: none;
			}
		}
	}
</style>